<template>
  <div class="city">
    <div class="top">
          <!-- 搜索框 -->
    <van-search 
      v-model="searchValue" 
      placeholder="城市/区域/位置" 
      shape="round"
      show-action
      @cancel="cancelClick"
    />
    <!-- tab的切换 -->
    <van-tabs v-model:active="tabActive" color="#ff9854" line-height="3">
      <template 
        v-for="(value, key, index) in allCities" 
        :key="key"
      >
        <van-tab :title="value.title" :name="key"></van-tab>
      </template>
    </van-tabs>
    </div>
    <div class="content">
      <template v-for="(value, key, index) in allCities" :key="key">
        <city-group v-show="tabActive === key" :group-data="value"/>
      </template>
      
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';

// import request from '@/services/request/index'
// import { getCityAll } from '@/services/index'
import useCityStore from '@/stores/modules/city'

import CityGroup from './cpns/city-group.vue'

// 搜索框逻辑
const router = useRouter()
const searchValue = ref("")
const cancelClick = () => {
  router.back()
}

//tab切换
const tabActive = ref()


// 网络请求数据
// const cityAll = ref({})
// getCityAll().then(res => {
//   console.log(res)
//   cityAll.value = res.data
// })
// console.log(cityAll)

// 从store中获取数据
const cityStore = useCityStore()
//发起Action网络请求
cityStore.fetchAllCitiesData()
const { allCities } = storeToRefs(cityStore)
// console.log(allCities)


//获取选中标签的数据
//首先获取正确的key,再将tabs中绑定的tabAction正确绑定
//然后根据key从allCities获取数据,因为默认不是响应式所以要加computed
const currentGroup = computed(() => allCities.value[tabActive.value])


</script>

<style lang="less" scoped>
.city {
  // --van-tabs-line-height: 30px;

  .top {
    position: relative;
    z-index: 9;
  }

  .content {
    height: calc(100vh - 98px);
    overflow-y: auto;
  }
}
</style>